<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <style>
*{
	margin: 0;
	padding: 0;
}
.box1{
    width: 200px;
    height: 2000px;
	display: flex;
	position: absolute;
    left: 87%;
    background-color: rgb(250, 250, 250);
    border: 1px solid #C1C1C1;
}
.box{
	width: 200px;
    height: 2000px;
	display: flex;
	position: absolute;
}
.ulList{
	width: 100%;
    height: 2000px;
	display: flex;
	flex-direction: column;
	background-color: rgb(250, 250, 250);
    border: 1px solid #C1C1C1;
	position: absolute;
	list-style: none;
}
.liList{
	width: 100%;
	line-height: 80px;
	display: flex;
	flex-direction: column;
	background-color: rgb(250, 250, 250);
	position: relative;
}
.liList1{
	width: 100%;
	line-height: 80px;
	display: flex;
	flex-direction: column;
	background-color: rgb(250, 250, 250);
	position: relative;
}

.liList p{
	font-size: 20px;
	text-align: center;
}
.liList ul{
	width: 100%;
	position: relative;
}
.liList ul li{
	width: 100%;
	height: 60px;
	line-height: 60px;
	background-color: rgb(250, 250, 250);
	list-style: none;
	text-align: center;
	position: relative;
}

#city{
    position: absolute;
    top: 50%;
    left: 14%;
    width: 1095px;
    height: 80px;
    display: block;
}
#city1{
    position: absolute;
    top: 2%;
    left: 14%;
    width: 1095px;
    height: 80px;
    display: block;
}
#day{
    position: absolute;
    left: 14%;
    top: 12%;
    width: 1095px;
    height: 60px;
    display: block;
}
#text1{
    position: absolute;
    left: 7%;
    top: 50%;
    width: 100px;
    height: 30px;
    font-size: 25px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: rgb(0, 0, 0);
}
#text2{
    position: absolute;
    left: 7%;
    top: 40%;
    width: 150px;
    height: 30px;
    font-size: 25px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: rgb(0, 0, 0);
}
#i1{
    position: absolute;
    left: 58%;
    top: 40%;
    width: 200px;
    height: 35px;
    font-size: 20px;
    font-family: Microsoft YaHei;
    font-weight: 350;
    text-align: center;
    color: rgb(0, 0, 0);
    border-radius: 5px;
}
#but1{
    position: absolute;
    left: 80%;
    top: 40%;
    width: 60px;
    height: 35px;
    background-color: rgb(197, 230, 241); 
    border-radius: 10px;
    border: none;
}
#but2{
    position: absolute;
    left: 80%;
    top: 40%;
    width: 60px;
    height: 35px;
    background-color: rgb(197, 230, 241); 
    border-radius: 10px;
    border: none;
}
#bu4{
    position: absolute;
    left: 69%;
    top: 38%;
    width: 110px;
    height: 35px;
    background-color: rgb(197, 230, 241); 
    border-radius: 10px;
    border: none;
}
#t01{
    position: absolute;
    left: 58%;
    top: 60%;
    width: 50px;
    height: 30px;
    background-color: rgb(197, 230, 241);
    font-size: 20px;
    font-family: Microsoft YaHei;
    font-weight: 350;
    text-align: center;
    color: rgb(0, 0, 0);
    border-radius: 5px;
}
#t02{
    position: absolute;
    left: 66%;
    top: 60%;
    width: 50px;
    height: 30px;
    font-size: 20px;
    font-family: Microsoft YaHei;
    font-weight: 350;
    text-align: center;
    color: rgb(0, 0, 0);
    border-radius: 5px;
}
#t03{
    position: absolute;
    left: 74%;
    top: 60%;
    width: 50px;
    height: 30px;
    font-size: 20px;
    font-family: Microsoft YaHei;
    font-weight: 350;
    text-align: center;
    color: rgb(0, 0, 0);
    border-radius: 5px;
}
#t04{
    position: absolute;
    left: 82%;
    top: 60%;
    width: 50px;
    height: 30px;
    font-size: 20px;
    font-family: Microsoft YaHei;
    font-weight: 350;
    text-align: center;
    color: rgb(0, 0, 0);
    border-radius: 5px;
}
#t05{
    position: absolute;
    left: 90%;
    top: 60%;
    width: 50px;
    height: 30px;
    font-size: 20px;
    font-family: Microsoft YaHei;
    font-weight: 350;
    text-align: center;
    color: rgb(0, 0, 0);
    border-radius: 5px;
}
#tupian1{
    width: 700px;
    height: 300px;
    position: absolute;
    top: 63%;
    left: 18%;
}
#kaiguan{
    height: 300px;
    width: 260px;
    position: absolute;
    left: 64%;
    top: 63%;
    background-color: #C1C1C1;
}
#bt01{
    width: 260px;
    height: 50px;
    font-size: 40px;
    font-family: Microsoft YaHei;
    font-weight: 300;
    text-align: center;
    color: rgb(255, 255, 255);
}
#bt02{
    width: 80px;
    height: 50px;
    font-size: 30px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: rgb(255, 255, 255);
    position: absolute;
    left: 36%;
    top: 30%;
}
#bt03{
    width: 100px;
    height: 50px;
    font-size: 15px;
    font-family: Microsoft YaHei;
    font-weight: 350;
    position: absolute;
    left: 33%;
    top: 41%;
    color: rgb(226, 224, 222);
}
#bt04{
    width: 80px;
    height: 50px;
    font-size: 30px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: rgb(255, 255, 255);
    position: absolute;
    left: 36%;
    top: 65%;
}
#bt05{
    width: 100px;
    height: 50px;
    font-size: 15px;
    font-family: Microsoft YaHei;
    font-weight: 350;
    position: absolute;
    left: 33%;
    top: 76%;
    color: rgb(226, 224, 222);
}
#tupian2{
    width: 500px;
    height: 300px;
    position: absolute;
    top: 110%;
    left: 48%;
}
#jieshao{
    width: 460px;
    height: 300px;
    position: absolute;
    top: 110%;
    left: 18%;
    background-color: rgb(196, 205, 209);
}
#tt01{
    width: 200px;
    height: 50px;
    font-size: 20px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: rgb(255, 255, 255);
    position: absolute;
    top: 8%;
    left: 5%;
}
#tt02{
    width: 200px;
    height: 50px;
    font-size: 20px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: rgb(255, 255, 255);
    position: absolute;
    top: 38%;
    left: 5%;
}
#tt03{
    width: 200px;
    height: 50px;
    font-size: 20px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: rgb(255, 255, 255);
    position: absolute;
    top: 68%;
    left: 5%;
}
#tt11{
    width: 360px;
    height: 30px;
    font-size: 15px;
    font-family: Microsoft YaHei;
    font-weight: 350;
    color: rgb(255, 255, 255);
    position: absolute;
    top: 20%;
    left: 5%;
}
#tt12{
    width: 360px;
    height: 30px;
    font-size: 15px;
    font-family: Microsoft YaHei;
    font-weight: 350;
    color: rgb(255, 255, 255);
    position: absolute;
    top: 50%;
    left: 5%;
}
#tt13{
    width: 360px;
    height: 30px;
    font-size: 15px;
    font-family: Microsoft YaHei;
    font-weight: 350;
    color: rgb(255, 255, 255);
    position: absolute;
    top: 80%;
    left: 5%;
}
#lx{
    width: 1000px;
    height: 100px;
    position: absolute;
    top: 26%;
    left: 17%;
    background-color: rgb(197, 230, 241);
}
#lx p{
    font-size: 20px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: rgb(133, 130, 130);
}
#luxian1{
    position: absolute;
    top: 15%;
    left: 15%;
}
#luxian2{
    position: absolute;
    top: 50%;
    left: 15%;
}
#lx-tu1{
    position: absolute;
    top: 45%;
    left: 49%;
    width: 500px;
    height: 400px;
}
#lx-js{
    position: absolute;
    top: 45%;
    left: 17%;
    width: 500px;
    height: 400px;
    background-color: #c8d8e7;
}
#lx-js p{
    width: 450px;
    height: 70px;
    font-family: Microsoft YaHei;
    font-weight: 350;
    color: rgb(255, 255, 255);
}
#lt01{
    position: absolute;
    top: 10%;
    left: 5%;
    font-size: 17px;
}
#lt02{
    font-size: 22px;
    position: absolute;
    top: 40%;
    left: 5%;
}
#lt03{
    font-size: 22px;
    position: absolute;
    top: 60%;
    left: 5%;
}
#da{
    position: absolute;
    top: 770px;
    left: 38%;
    width: 670px;
    height: 400px;
}
#da-js{
    position: absolute;
    top: 770px;
    left: 17%;
    width: 330px;
    height: 400px;
    background-color: black;
}
#da-js p{
    width: 270px;
    height: 70px;
    font-family: Microsoft YaHei;
    font-weight: 350;
    color: rgb(255, 255, 255);
}
#dt01{
    position: absolute;
    top: 8%;
    left: 8%;
}
#dt02{
    position: absolute;
    top: 60%;
    left: 8%;
}
#dt03{
    position: absolute;
    top: 70%;
    left: 8%;
}
#dytu{
    position: absolute;
    top: 1210px;
    left: 59%;
    width: 350px;
    height: 500px;
}
#dy-js{
    background-color: #373332;
    width: 650px;
    height: 500px;
    position: absolute;
    top: 1210px;
    left: 17%;
}

#dy-js p{
    width: 550px;
    height: 80px;
    font-family: Microsoft YaHei;
    font-weight: 350;
    color: rgb(255, 255, 255);
}
#yt01{
   position: absolute;
   top: 8%;
   left: 5%;
}
#yt02{
    position: absolute;
    top: 60%;
    left: 5%;
    font-size: 20px;
}
#yt03{
    position: absolute;
    top: 70%;
    left: 5%;
    font-size: 20px;
}
#tlx{
    position: absolute;
    top: 30%;
    left: 19%;
    width: 550px;
    height: 80px;
    font-family: Microsoft YaHei;
    font-weight: 450;
    font-size: 25px;
}
#lxt1{
    position: absolute;
    top: 40%;
    left: 19%;
    width: 550px;
    height: 80px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    font-size: 20px;
}
#cl1{
    position: absolute;
    top: 50%;
    left: 45%;
    width: 550px;
    height: 400px;
}
#cl2{
    position: absolute;
    top: 50%;
    left: 19%;
    width: 400px;
    height: 400px;
    background-color: black;
}
.h1{
    position: absolute;
    top: 9%;
    left: 9%;
    width: 320px;
    height: 400px;
    font-family: Microsoft YaHei;
    font-weight: 500;
    font-size: 25px;
}
#cl2 h1{
    color: rgb(255, 255, 255);
}
#cl2 p{
    position: absolute;
    top: 20%;
    left: 9%;
    width: 320px;
    height: 400px;
    font-family: Microsoft YaHei;
    font-weight: 300;
    font-size: 18px;
    color: rgb(255, 255, 255);
}
#k11{
    position: absolute;
    top: 800px;
    left: 58%;
    width: 350px;
    height: 400px;
}
#k12{
    width: 600px;
    height: 400px;
    background-color: #cac2b7;
    position: absolute;
    top: 800px;
    left: 19%;
}
#k12 h1{
    color: #000;
}
#k12 p{
    position: absolute;
    top: 30%;
    left: 9%;
    width: 520px;
    height: 400px;
    font-family: Microsoft YaHei;
    font-weight: 300;
    font-size: 18px;
    color: #000;
}
#k21{
    position: absolute;
    top: 1280px;
    left: 58%;
    width: 350px;
    height: 400px;
}
#k22{
    width: 600px;
    height: 400px;
    background-color: #cac2b7;
    position: absolute;
    top: 1280px;
    left: 19%;
}
#k22 h1{
    color: #000;
}
#k22 p{
    position: absolute;
    top: 30%;
    left: 9%;
    width: 520px;
    height: 400px;
    font-family: Microsoft YaHei;
    font-weight: 300;
    font-size: 18px;
    color: #000;
}
#k31{
    position: absolute;
    top: 1280px;
    left: 58%;
    width: 350px;
    height: 400px;
}
#k32{
    width: 600px;
    height: 400px;
    background-color: #cac2b7;
    position: absolute;
    top: 1280px;
    left: 19%;
}
#k32 h1{
    color: #000;
}
#k32 p{
    position: absolute;
    top: 30%;
    left: 9%;
    width: 520px;
    height: 400px;
    font-family: Microsoft YaHei;
    font-weight: 300;
    font-size: 18px;
    color: #000;
}
#gjxh{
    position: absolute;
    top: 5%;
    left: 20%;
    font-size: 25px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: rgb(0, 0, 0);
}

* {
    margin: 0;
    padding: 0;
}
 
.app {
    width: 50%;
    position: absolute;
    left: 22%;
    top: 5%;
    margin: 50px 0;
    text-align: center;
}
 
.app .scroll {
    position: relative;
    display: inline-block;
    width: 800px;
    height: 300px;
}
 
.app .scroll .img {
    display: none;
    width: 100%;
}
 
.app .scroll .current {
    display: block;
}
 
.scroll .lf {
    position: absolute;
    top: 50%;
    left: 200px;
    background-image: url('img/arrow.png');
    background-position: -83px 0;
    width: 41px;
    height: 69px;
    cursor: pointer;
    transform: translateY(-50%);
}
 
.scroll .lr {
    position: absolute;
    top: 50%;
    right: 200px;
    background-image: url('img/arrow.png');
    background-position: -123px 0;
    width: 41px;
    height: 69px;
    cursor: pointer;
    transform: translateY(-50%);
}
 
.scroll img{
    width: 800px;
    height: 300px;
}
.dots {
    position: absolute;
    bottom: 15px;
    right: 320px;
    width: 160px;
}
 
.dots>span {
    display: inline-block;
    box-sizing: border-box;
    width: 11px;
    height: 11px;
    border: 3px solid rgba(204, 204, 204, 0.2);
    border-radius: 15px;
    cursor: pointer;
}
 
.dots>span:not(:last-child) {
    margin-right: 5px;
}
 
/* 小圆点的颜色 */
.dots .square {
    background: #f46;
}

     
    </style>

<div class="box1"></div>
<div class="box">
	<ul class="ulList">
        <li class="liList1">
            <img class="tupian1" src="./img/logo.png">
        </li>
		<li class="liList">
			<p onclick="menu_active(ulTwo)">景区推荐</p>
			<ul class="childUl" id="ulTwo" style="display: none;">
				<li id="tuijian">推荐景区</li>
				<li id="all">所有景区</li>
			</ul>
		</li>
		<li class="liList">
			<p onclick="menu_active(ulThree)">路线规划</p>
			<ul class="childUl" id="ulThree" style="display: none;">
				<li>路线1</li>
				<li>路线2</li>
				<li>路线3</li>
			</ul>
		</li>
        <li class="liList">
			<p onclick="menu_active(ulOne)">景区内实时路线规划</p>
			<ul class="childUl" id="ulOne" style="display: none;">
				<li>最省时</li>
				<li>路程最短</li>
                <li>避免拥挤</li>
			</ul>
		</li>
	</ul>
</div>
	
<div class="tuijian" >
    <p id="gjxh">根据喜好分析，为您推荐以下景点：</p>
      
    <div class="app">
        <div class="scroll">

            <img src="./img/index-img/2.jpg" alt="scrollImage" class="img current">
            <img src="./img/index-img/33.png" alt="scrollImage" class="img">
            <img src="./img/index-img/34.png" alt="scrollImage" class="img">
           
            <div class="lf"></div>
            <div class="lr"></div>
            
            <div class="dots">
                <span class="square"></span>
                <span></span>
                <span></span>
            </div>
        </div>
    </div>
    <div id="city">
        <p id="text1">选择城市</p>
        <div id="t01">北京</div>
        <div id="t02">上海</div>
        <div id="t03">杭州</div>
        <div id="t04">西安</div>
        <div id="t05">更多</div>
    </div>
    <div id="jingqu1">
    
        <div id="gugong">
            <img src="./img/index-img/5.jpg" id="tupian1">
            <div id="kaiguan">
                <p id="bt01">今日开馆</p>
                <p id="bt02">08:30</p>
                <p id="bt03">开放入馆时间</p>
                <p id="bt04">16:10</p>
                <p id="bt05">停止入馆时间</p>
            </div>
        </div>

        <div id="tiananmen">
          <img src="./img/index-img/6.jpg" id="tupian2">
          <div id="jieshao">
           <p id="tt01">毛主席纪念堂</p>
           <p id="tt11">周一不开放，周二—周日上午8点到12点开放，注意了只有上午可以瞻仰哦！</p>
           <p id="tt02">升降旗仪式</p>
           <p id="tt12">如果想亲眼目睹升降旗，那得在升降旗前一两个小时就过来，不然到时候就只能看见您前面人的后脑勺了。</p>
           <p id="tt03">人民英雄纪念碑</p>
           <p id="tt13">由林徽因女士设计，正面碑心是一整块石材，镌刻着毛泽东题写的“人民英雄永垂不朽”八个鎏金大字。</p>
          </div>
        </div>


    </div>
</div>

<div class="luxian" style="display: none;">
    <div id="city1">
        <p id="text1">选择城市</p>
        <div id="t01">西安</div>
        <div id="t02">北京</div>
        <div id="t03">杭州</div>
        <div id="t04">上海</div>
        <div id="t05">更多</div>
    </div>
    <div id="day">
     <p id="text2">输入旅行天数</p>
     <input id="i1" >
     <button id="but1">提交</button>
    </div>
    <div id="neirong" style="display: none;">
    <div id="lx">
        <p id="luxian1">钟楼——鼓楼——大唐芙蓉园——大雁塔——大唐不夜城；住宿：钟楼附近</p>
        <p id="luxian2">回民街——兵马俑——洒金桥</p>
    </div>
    <div id="zhonglou">
        <img id="lx-tu1" src="./img/index-img/7.jpg">
        <div id="lx-js">
          <p id="lt01">西安钟楼建成于公元1384年，距今已有600余年。它位于中国陕西省西安市的市中心，城内东西南北四条大街的交汇处。是中国古代遗留下来众多钟楼中形制最大、保存最完整的一座</p>
          <p id="lt02">门票价格：钟鼓楼套票54元，学生票 27元</p>
          <p id="lt03">开放时间：8:00—22:00</p>
        </div>
    </div>
    <div id="datang">
     <img id="da" src="./img/index-img/8.jpg">
     <div id="da-js">
        <p id="dt01">位于大雁塔东南侧的大唐芙蓉园，建于原唐代皇家芙蓉园遗址上。来到这里，可以观赏恢弘的仿唐建筑，欣赏灯光衬托下的美景，还可以观看具有盛唐风情的歌舞《梦回大唐》。</p>
        <p id="dt02">园内交通：参考价格：30元/人/趟</p>
        <p id="dt03">开放时间：8：00——23：00</p>
     </div>
    </div>
    <div id="dayan">
     <img id="dytu" src="./img/index-img/9.jpg">
     <div id="dy-js">
     <p id="yt01">从唐长安化为废墟开始，一直到20世纪七十年代，64米高的大雁塔一直是西安最高的建筑，同时也是我国现存最早、规模最大的唐代四方楼阁式砖塔。
        与小雁塔等相比，大雁塔所承载的历史最多最重。从高宗时期，玄奘草创大雁塔开始，大雁塔就一直是最著名的景点之一。大雁塔不仅仅是历史的丰碑，也是文化的载体。不仅仅是弘扬佛法，不仅仅是雁塔题名，不仅仅是不朽的二圣三绝碑，也不仅仅是门楣上“吴带当风”的精美线刻画。单单是无数文人墨客所留下的笔墨，就是一笔无比珍贵的精神财富。自玄奘建塔开始，上官婉儿、岑参、储光羲等无数诗人都在大慈恩寺，在大雁塔留下了足迹。</p>
    <p id="yt02">门票价格：免费</p>
    <p id="yt03">开放时间：全天开放</p>
     </div>
    </div>

    </div>
</div>

<div class="jqlx" style="display: none;">
<div id="dingwei">
    <div id="day">
        <p id="text2">输入景区</p>
        <input id="i1" >
        <button id="but2">提交</button>
       </div>
       <div id="jqn" style="display: none;">
        <p id="tlx">推荐路线</p>
        <p id="lxt1">陈列厅—1号坑—2号坑—3号坑</p>
        <button id="bu4">点击开启导航</button>
        <div id="clt">
            <img id="cl1" src="./img/index-img/10.png">
            <div id="cl2">
                <h1 class="h1">陈列厅</h1>
                <p>大门右侧的陈列厅，这里展示了我国考古史上发现最早、体型最大、保存最完整的两乘青铜马车。它们原本被存放于一个大木椁中，由于木椁腐烂填土坍塌，发现时早已被挤压成一堆碎片。考古专家花了整整3年时间才将2号铜马车复原，此后又用了5年修复了1号铜马车。

                    在这之前，考古发现的车均为木质，出土早已腐朽。这两辆车第一次让我们知道了始皇御用车样式，也为我们解开了许多谜题。</p>
            </div>
        </div>
        <div id="k1">
            <img id="k11" src="./img/index-img/11.jpg">
            <div id="k12">
            <h1 class="h1">1号坑</h1>
            <p>这里埋藏着6000多个士兵，如今已有1087个被修复集合在一起，给人一种摧枯拉朽之势的震撼感。一号坑为静态防御型军阵，前三列弓弩手作为前锋面向游客（东）蓄势待发；最后一列身着铠甲的重装步兵反向而立（西）警惕后方威胁；两边荷弩佩剑的左右翼面向外侧（南北）时刻待命；而中央的战车与步兵有序相间，形成全副武装、戒备森严、待命不动的警卫型军阵。
            </p>
            </div>
        </div>
        <div id="k2">
            <img id="k21" src="./img/index-img/12.jpg">
            <div id="k22">
            <h1 class="h1">2号坑</h1>
            <p>这里面积虽然只有1号坑的1/2,军阵步列却复杂得多，出现了车、步、骑3个兵种的独立阵营和车步骑混合营垒。最著名的便是跪射俑，由于高度较低在俑坑坍塌时幸免于难，是出土保存最完善的兵俑，连鞋底防滑的印花都清晰可见。令人不可置信的是，这些兵器埋于地下2000多年后依旧磋磨精密、光洁如新，锐利无比，这不仅需要最先进的打磨工具旋切机辅助，还需要最科学的化学配比。</p>
            </div>
        </div>
        <div id="k3">
            <img id="k31" src="./img/index-img/13.jpg">
            <div id="k32">
            <h1 class="h1">3号坑</h1>
            <p>虽然这里只有1号坑的1/27，但军事意义却十分突出。整个坑形成凹字形，中部停放了一乘战车，北部象征祷战的场所，南部象征统领军务和睡觉的地方，结合在一起俨然是“一堂二内”的军幕。</p>
            </div>
        </div>
       </div>
      
</div>
</div>
<script>
    function menu_active(ulId){
	if(ulId.style.display == "none"){
		ulId.style.display = "block"
	}else{
		ulId.style.display = "none"
	}
}

let lis=document.querySelectorAll('.liList')
let jq=document.querySelector('.tuijian')
let lx=document.querySelector('.luxian')
let jqlx=document.querySelector('.jqlx')
let but1=document.querySelector('#but1')
let but2=document.querySelector('#but2')
let neirong=document.querySelector('#neirong')
let jqn=document.querySelector('#jqn')
lis[0].style.background='rgb(165, 218, 253)'
for(let i=0;i<lis.length;i++){
    lis[i].addEventListener('click',function(){
    for(let j=0;j<lis.length;j++){
       lis[j].style.background='rgb(250, 250, 250)'
    }
    this.style.background='rgb(165, 218, 253)'
    if(i==0){
    jq.style.display='block'
    lx.style.display='none'
    jqlx.style.display='none'
    }else if(i==1){
    jq.style.display='none'
    lx.style.display='block'
    jqlx.style.display='none'
    }else{
    jq.style.display='none'
    lx.style.display='none'
    jqlx.style.display='block'
    }
    })
}
but1.addEventListener('click',function(){
 neirong.style.display='block'
})
but2.addEventListener('click',function(){
 jqn.style.display='block'
})
window.addEventListener('load', function() {
 
 var leftArrow = this.document.querySelector('.lf');
 var rightArrow = this.document.querySelector('.lr');

 // 鼠标移动到左右箭头的位置更换图片 有灰色背景的图片
 leftArrow.addEventListener('mouseenter', function() {
     this.style.backgroundPosition = '0 0';
 });

 leftArrow.addEventListener('mouseleave', function() {
     this.style.backgroundPosition = '-83px 0';
 });

 rightArrow.addEventListener('mouseenter', function() {
     this.style.backgroundPosition = '-42px 0';
 });

 rightArrow.addEventListener('mouseleave', function() {
     this.style.backgroundPosition = '-123px 0';
 });

 // 获取图片 和 小点
 var imgs = this.document.querySelectorAll('.img');
 var dots = this.document.querySelector('.dots').querySelectorAll('span');

 // 给图片设置index 属性，好判断当前的图片是哪一张
 for (let i = 0; i < imgs.length; i++) {
     imgs[i].setAttribute('data-index', i);
 }

 // 获取当前图片 和 图片的index（数组下标）
 var current = this.document.querySelector('.current');
 var currentIndex = current.getAttribute('data-index');

 // 左箭头的点击事件，点击了就返回前一张图片 
 // 如果当前图片为第一张那么需要更换到最后一张图片也就是第四张
 leftArrow.addEventListener('click', function() {
     if (currentIndex > 0) {
         imgs[currentIndex].classList.remove('current');
         dots[currentIndex].classList.remove('square');
         imgs[--currentIndex].classList.add('current');
         dots[currentIndex].classList.add('square');
     } else {
         imgs[currentIndex].classList.remove('current');
         dots[currentIndex].classList.remove('square');
         currentIndex = 4;
         imgs[currentIndex].classList.add('current');
         dots[currentIndex].classList.add('square');
     }
 });

 // 点击右箭头下一张图片切换
 // 如果当前为第五张图片，那么切换回第一张图片
 rightArrow.addEventListener('click', changeImage);

 var timer = this.setInterval(changeImage, 3000);

 function changeImage() {
     if (currentIndex < 2) {
         imgs[currentIndex].classList.remove('current');
         dots[currentIndex].classList.remove('square');
         imgs[++currentIndex].classList.add('current');
         dots[currentIndex].classList.add('square');
     } else {
         imgs[currentIndex].classList.remove('current');
         dots[currentIndex].classList.remove('square');
         currentIndex = 0;
         imgs[currentIndex].classList.add('current');
         dots[currentIndex].classList.add('square');
     }
 };

 // 小圆点的点击事件
 for (let k = 0; k < dots.length; k++) {
     dots[k].setAttribute('data-index', k);
     dots[k].addEventListener('click', function() {
         var index = this.getAttribute('data-index');
         if (index != currentIndex) {
             imgs[currentIndex].classList.remove('current');
             dots[currentIndex].classList.remove('square');
             imgs[index].classList.add('current');
             dots[index].classList.add('square');
             currentIndex = index;
         }

     })
 }

});
</script>
</body>
</html>
